<template>
  <div class="app-container customer-div" style="overflow-x: auto">
    <!-- 搜索栏  -->
    <el-form :inline="true" :model="listQuery" size="mini" label-width="60px">
      <el-form-item label="日期：">
        <el-date-picker
          v-model="listQuery.inquiryDate"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="采购员：">
        <el-select
          v-model="listQuery.chargeUserId"
          placeholder="请选择"
          filterable
          clearable
          allow-create
          :loading="selectLoading"
        >
          <el-option
            v-for="item in options"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          style="margin-left: 10px"
          type="primary"
          @click="handleSearch"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <!-- echarts图标 -->
    <div
      id="purchaseChart"
      style="height: 400px; margin-top: 20px"
      v-loading="loadingChart"
    ></div>
    <!-- 数据列表 -->
    <el-table
      :data="tableData"
      style="width: 98%; margin-top: 20px"
      border
      height="500"
      :default-sort="{
        prop: ['inquiryCount', 'priceCount'],
        order: 'descending',
      }"
      :header-cell-style="{ background: '#fafafa', height: '48px', padding: 0 }"
    >
      <el-table-column
        prop="userRealName"
        label="采购员"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="inquiryCount"
        label="询价总次数"
        sortable
        min-width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="inquiryGoodsNum"
        label="询价数量"
        sortable
        min-width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="priceCount"
        label="报价次数"
        sortable
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="priceGoodsNum"
        label="报价数量"
        sortable
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="priceMinutes"
        label="平均报价时长(分钟)"
        min-width="130"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="maxMinutes"
        label="最长回复时长"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="minMinutes"
        label="最短回复时长"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="10Minutes"
        label="10分钟内回复"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="30Minutes"
        label="30分钟内回复"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="oneHour"
        label="1小时内回复"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="oneHourMore"
        label="超过1小时回复"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="orderCount"
        label="成交次数"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="orderGoodsNum"
        label="成交数量"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="orderRate"
        label="成交率"
        min-width="100"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
const defaultListQuery = {
  inquiryDate: [], //询价日期
  chargeUserId: "",
};
import { getPurchaseTimeReportAPI } from "@/api/allInLine/report.js";
import {getOrderUsersList} from '@/api/partner'
import { mapGetters } from "vuex";
import { formatDate } from "@/utils/date";
import echarts from "echarts";
export default {
  name: "purchaseTimeReport", //采购回复时长分析
  data() {
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      btnLoading: false,
      loadingChart: false,
      selectLoading: false,
      options: [], //采购员
      // 表格数据
      tableData: [],
      // 柱状图数据
      xList: [],
      yList: [],
      timer:null
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
  },
  created() {
    let now = new Date();
    let today = formatDate(now, "yyyy-MM-dd");
    this.listQuery.inquiryDate = [today, today];
    if(this.$route.query.dataDate){
      this.listQuery.inquiryDate = this.$route.query.dataDate
    }
    this.getPurchaseTimeReport();
    this.getSalesmanList();
  },
  mounted() {
    // this.initChart();
    this.timer= setInterval(()=>{
      this.getPurchaseTimeReport()
    }, 600000);
  },
  methods: {
    // 查询
    handleSearch() {
      this.getPurchaseTimeReport();
    },
    // 配置图表
    initChart() {
      const chart = echarts.init(document.getElementById("purchaseChart"));
      const option = {
        tooltip: {
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          name: "次数",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          name: "时间",
          data: this.xList,
        },
        series: [
          {
            type: "bar",
            data: this.yList,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  //只要修改前四个参数就ok
                  offset: 0,
                  color: "#005BEA",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#00C6FB",
                },
              ]),
            },
          },
        ],
      };
      chart.setOption(option);
    },
    //获取询价统计列表
    async getPurchaseTimeReport() {
      this.loadingChart = true;
      const res = await getPurchaseTimeReportAPI(this.listQuery);
      this.xList = res.xList;
      this.yList = res.yList;
      this.tableData = res.list;
      this.initChart();
      this.loadingChart = false;
    },
    // tab栏切换
    handleClick1() {
      this.getPurchaseTimeReport();
    },
    // 获取采购员列表
    async getSalesmanList() {
      this.selectLoading = true;
      const res = await getOrderUsersList({ departmentType: "purchase" });
      this.selectLoading = false;
      this.options = res;
    },
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style scoped lang="scss">
.el-card /deep/ .el-card__body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 90px;
  .inquiryNumber {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
  }
  .inquiryStr {
    font-size: 14px;
    color: #ccc;
  }
}
// .el-table thead {
//   height: 50px;
//   background-color: #ccc !important;
// }
.headerColor {
  background-color: #ccc;
}
</style>
